<template>
  <XtxBread v-if="cateInfo">
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <transition name="fade-right" mode="out-in">
    <XtxBreadItem :key="cateInfo.fcate.id" :to='`/category/${cateInfo.fcate.id}`'>{{cateInfo.fcate.name}}</XtxBreadItem>
 </transition>
     <transition name="fade-right" mode="out-in">
    <XtxBreadItem :key="cateInfo.scate.id">{{cateInfo.scate.name}}</XtxBreadItem>
      </transition>
  </XtxBread>
</template>
<script>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
export default {
  setup (props) {
    const store = useStore()
    const router = useRoute()

    const cateInfo = computed(() => {
      const info = {
        fcate: {},
        scate: {}
      }
      store.state.cate.list.some((farst) => {
        const cate = farst.children && farst.children.find(item => item.id === router.params.id)
        if (cate) {
          info.fcate.id = farst.id
          info.fcate.name = farst.name
          info.scate.id = cate.id
          info.scate.name = cate.name
          return true
        }
      })
      return info
    })
    return { cateInfo }
  }
}
</script>
